<template>
  <div class="pt15">
    <div class="wxkj-tab">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane name="first">
          <span slot="label">
            <el-badge v-if="recruitCount > 0" :value="recruitCount"> 招聘信息 </el-badge>
            <span v-else>招聘信息</span>
          </span>
          <el-card>
          <recruit @alreadyRead="alreadyRead" />
          </el-card>
        </el-tab-pane>
        <el-tab-pane name="second">
          <span slot="label">
            <el-badge v-if="newCount > 0" :value="newCount"> 用户留言 </el-badge>
            <span v-else>用户留言</span>
          </span>
          <el-card>
          <div v-if="!noData" class="lists">
            <div
              v-for="(item, index) in list"
              :key="index"
              class="list clearfix pt15 pb15"
            >
              <div>
                <div class="content clearfix">
                  <!-- 头像 -->
                  <div class="head-portrait mr10">
                    <!-- <img :src="item.level.photoUrl" alt="" /> -->
                    <span class="sign" v-if='item.level.readFlag == 1'></span>
                     <el-avatar :size="60" icon="el-icon-user-solid" :src="item.level.photoUrl" />
                    
                  </div>
                  <!-- / 头像 -->
                  <div class="info fl mt5">
                    <!-- 时间 -->
                    <div class="time f14 text-999">
                      用户
                      <span class="fb">{{ item.level.sendRealname }}</span>
                      {{ item.level.createTime }}在平台留言
<!-- 删除 -->
                      <div
                        class="delete text-999 f14 link-type fr"
                        @click="delItem(item.level.id)"
                      >
                        <span class="el-icon-delete mr5" />
                        <span>删除</span>
                      </div>
                      <!-- / 删除 -->
                    </div>
                    <!-- / 时间 -->
                    <!-- 求职者 -->
                    <div class="job-wanted mt5" @click="read(item)">
                      <span class="f16 text-333 mr20">{{
                        item.level.newsContent
                      }}</span>
                      <!-- 详情 -->
                      <!-- / 详情 -->
                    </div>
                    <div
                      v-if="item.response"
                      class="reply-content p15 f14 text-333 mt5 mb5"
                    >
                      回复：{{ item.response.newsContent }}
                    </div>
                    <el-popover v-else
                      placement="right"
                      width="430"
                      trigger="click"
                    >
                      <el-input
                        v-model="item.newsContent"
                        type="textarea"
                        :rows="3"
                        placeholder="请填写回复内容"
                      />
                      <el-button
                        type="primary"
                        class="fr mt10"
                        size="mini"
                        @click="submitReply(item)"
                      >确定</el-button>
                      <el-button
                        slot="reference"
                        type="text"
                      >
                        <span><i class="el-icon-chat-line-round mr5" />回复</span>
                      </el-button>
                    </el-popover>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <no-data v-if="noData" class="mb30" />
          <!-- 分页 -->
          <pagination
            v-show="total > 0"
            :total="total"
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, jumper"
            :page.sync="listQuery.pageNo"
            :limit.sync="listQuery.pageSize"
            @pagination="getList"
          />
          <!-- / 分页 -->
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import recruit from './components/recruit'
import {
  leavingNewsList,
  leavingNewsDelete,
  leavingNewsAdd,
  leavingNewsCount,
  enMessageCount,
  leavingNewsEdit
} from '@/api/article'
import noData from '@/components/noData'
export default {
  components: { Pagination, noData, recruit },
  directives: { waves },
  // 私有数据
  data() {
    return {
      activeName: 'first', // 头部导航默认
      total: 0,
      recruitCount: 0,
      newCount: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      list: [],
      visible: false, // 弹出框显示与隐藏
      reply: '' // 回复内容输入框--数据
    }
  },
  computed: {
    noData() {
      return this.list.length === 0 && this.listQuery.pageNo === 1
    }
  },
  created() {
    this.getList()
    enMessageCount().then(res => {
      this.recruitCount = res.result
    })
    leavingNewsCount().then(res => {
      this.newCount = res.result
    })
  },
  // 事件处理
  methods: {
    alreadyRead() {
      this.recruitCount--
    },
    // 回复
    submitReply(item) {
      this.read(item)
      leavingNewsAdd({
        partentId: item.level.id,
        receiveId: item.level.sendId,
        newsContent: item.newsContent,
        readFlag: 1,
        receiveType: item.level.sendType,
        sendType: 2
      }).then((res) => {
        this.$message({
          message: '回复成功',
          type: 'success'
        })
        this.getList()
      })
    },
    // 已读
    read(item){
      leavingNewsEdit({id: item.level.id,readFlag:2}).then(res => {
        this.newCount--;
         item.level.readFlag = 2;
      })
    },
    getList() {
      this.listLoading = true
      leavingNewsList(this.listQuery).then((response) => {
        this.list = response.result.records
        this.total = response.result.total
        // if( this.list.length == 0 && this.listQuery.pageNo > 1){
        //   this.listQuery.pageNo--;
        //   this.getList();
        // }
        this.listLoading = false
      })
    },
    handleClick() {},
    delItem(id) {
      this.$confirm('确定要删除此留言吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          leavingNewsDelete({ id: id }).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList();
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  border-bottom: 1px solid #f3f3f3;
  position: relative;
}
.content{
  position: relative;
}
.head-portrait {
  position: absolute;
  left: 0;
  top: 0;
  img {
    width: 60px;
    height: 60px;
    border-radius: 30px;
  }
  .sign{
    position:absolute;
    right: 8px;
    width: 8px;
    height: 8px;
    background: #E54437;
    border-radius: 50%;
  }
}
.info{
  padding-left:70px ;
  width: 100%;
}
.job-wanted {
  line-height: 24px;
}
::v-deep .el-badge__content.is-fixed {
  top: 10px;
}
.reply-content {
  background: #f2f2f2;
  border-radius: 5px;
  line-height: 20px;
}
</style>
